<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淡炒番茄</title>
<meta charset="UTF-8"/>
<meta name="description" content="不知道为什么就是想写个网站玩儿，但技术不行将就用吧!"/>
<meta name="viewport"  content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"/>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content=""/>
<meta name="robots" content="index,follow" />
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<link href="../css/common.css" rel="stylesheet"/>
<link href="../css/content.css" rel="stylesheet"/>
<link href="../css/editUserInfo.css" rel="stylesheet"/>
<script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/iscroll-zoom.js"></script>
<script src="../js/hammer.js"></script>
<script src="../js/lrz.all.bundle.js"></script>
<script type="text/javascript" src="../js/smallarAlert.js"></script>
<script src="../js/jquery.photoClip.js"></script>

</head>
<body class="dfb" >
	<div class="bodco bodyd" >
		<div class="contbt">
			<ul>
				<li><a href="list.php?type=2" class="fonts1 font3 remFlo clicks1">小技术</a></li>
				<li><p  class="fonts font1">|</p></li>
				<li><a href="list.php?type=1" class="fonts1 font3 remFlo clicks1">小信息</a></li>
			</ul>
		</div>
		<div class="contnr">
			<div class="contnrhe">
				<div class="contnrheim">
					<img class="contnrheimm" title="人生苦短，及时行乐！" src="../img/he.png">
				</div>
				<div class="fonts font3 contnrhecon">
					淡炒番茄
				</div>
				<div class="fonts font2 contnrhecon contnrhetext">
					地址：四川-成都
				</div>
			</div>
			<div class="contnrr">
				<div class="contnrrbotedit" >
					<input id="headingt" name="headingt" style="display:none;">
					<input id="types" name="types" style="display:none;">
					<div class="contnrrbotedits">
						<div class="imgHead">
							<ul>
								<li>
									<div class="imgHead_name">
										<p>--头像（建议使用google浏览器）--</p>
									</div>
									<div class="imgHead_head" >
										<div class="imgHead_choseFile">
											<input type="file" id="file" style="float: left;">
										</div>
										<div class="imgHead_clipArea" id="clipArea"></div>
										<div class="imgHead_clipBtn">
											<button  id="clipBtn">截取</button>
										</div>
										<form id="upLoadfile" action="../php/action/upLoadfile.php" method="post" enctype="multipart/form-data">
											<div  class="imgHead_view" id="view" id="view"></div>
										</form>
									</div>
								</li>
								<li>
									<div class="mind_title"><p>--吐槽(最多30字)--</p></div>
									<div class="mind_input">
										<input id="mindText" type="text" ></input>
									</div>
								</li>
								<li>
									<div class="mind_title"><p>--地区--</p></div>
									<div class="user_address">
										<select id="province">
											<option value="">省</option>
										</select>-
										<select id="city">
											<option value="">市</option>
										</select>
									</div>
								</li>
								<li>
									<div class="mind_title"><p>--密码（最多八位）--</p></div>
									<div class="mind_passwd">
										<input type="password" id="passw" ></input>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="contnrrbotconmetj" id="sumbitForm" onclick="saveValue();">
						提交
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="bodco bodcohrs" ><hr class="bodyh"/></div> 
 	<div class="bodco bodyf">
 		 <p class='fonts font2'> @2008-2015 <a href="../index.php" class='fonts font2 ' style="text-decoration: none;" >淡炒番茄</a> （http://www.dancfq.top/)  备案号：粤ICP备XXXXXX号 </p>
 	</div>
</body>
<script type="text/javascript">
$(function(){
	//加载省
	$.post("")
})

var dataUrl = "";
var clipArea = new bjj.PhotoClip("#clipArea", {
	size: [260, 260],
	outputSize: [640, 640],
	file: "#file",
	view: "#view",
	ok: "#clipBtn",
	loadStart: function() {
		console.log("照片读取中");
	},
	loadComplete: function() {
		console.log("照片读取完成");
	},
	clipFinish: function(dataURL) {
		//console.log("地址："+dataURL);
		dataUrl = dataURL;
		//console.log(convertBase64UrlToBlob(dataURL));
	}
});

function saveValue(){
    var form=document.forms[0];
    var formData = new FormData(form);   //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
    //convertBase64UrlToBlob函数是将base64编码转换为Blob
    formData.append("imageName",convertBase64UrlToBlob(dataUrl));  //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
    
    //ajax 提交form
    $.ajax({
        url : "../php/action/upLoadfile.php",
        type : "POST",
        data : formData,
        dataType:"text",
        processData : false,         // 告诉jQuery不要去处理发送的数据
        contentType : false,        // 告诉jQuery不要去设置Content-Type请求头
        success:function(data){
           if(data==1||data=="1"){//图片过大
        	   alertLog("截取的图片过大，图片最大200k!");
           }else if(data==2||data=="2"){//保存头像成功
        	  //保存其他信息
        	  var mindText = $("#mindText").val();//说说
        	  var province = $("#province").val();//省
        	  var city = $("#city").val();//市
        	  var passw = $("#passw").val();//密码
        	  if(mindText.length>30||passw>6){
        		  alertLog("说说过长！");
        		  return false;
        	  }
        	  
        	  if(passw>6){
        		  alertLog("密码过长！");
        		  return false;
        	  }
        	  
        	  var data = {};
        	  data["mind"]=mindText;
        	  data["provinces"]=provinces;
        	  data["city"]=city;
        	  data["passw"]=passw;
        	  
        	  $.post("../php/action/updateUserInfo.php",data,function(data){
        		  
        	  })
           }else{
        	   alertLog("保存头像失败！");
           }
        },
        
        xhr:function(){            //在jquery函数中直接使用ajax的XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            
            xhr.upload.addEventListener("progress", function(evt){
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);  
                    console.log("正在提交."+percentComplete.toString() + '%');        //在控制台打印上传进度
                }
            }, false);
            
            return xhr;
        }
        
    });
}

/* function saveValue(){
	$("#upLoadfile").submit();
} */

/**
 * 将以base64的图片url数据转换为Blob
 * @param urlData
 * 用url方式表示的base64图片数据
 */
function convertBase64UrlToBlob(urlData){
    
    var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
    
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }

    return new Blob( [ab] , {type : 'image/png'});
}

function alertLog(message){
	$.MsgBox({type:"alert",speed:200,title:"登录",msg:message,opacity:'0.5',callback:function(){
		window.location.replace("../index.php");
	}});
}
</script>
</html>